<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="85px">
        <el-form-item label="日期：" prop="type">
          <el-date-picker clearable v-model="queryParams.dateTtime" value-format="yyyy-MM-dd" type="date" :picker-options="pickerOptions"
           placeholder="请选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="年级" prop="year">
          <el-select v-model="queryParams.year"  clearable  placeholder="请选择年级" @change="getqueryFormclassList">
            <el-option
              v-for="dict in dict.type.year_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="班级" prop="classId">
          <el-select v-model="queryParams.classId" :disabled='isClassDisabled' clearable   placeholder="请选择班级">
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.label"
              :value="item.id"
              size="small">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生姓名：" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入学生姓名" clearable size="small" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          <el-button type="info" icon="el-icon-download" size="mini" @click="handleExport" >导出</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="sportList">
        <el-table-column type="index" align="center" label="序号" :index="customeIndex" width="80"></el-table-column>
        <el-table-column label="年级" align="center" prop="year" >
          <template slot-scope="scope">
            <dict-tag :options="dict.type.year_type" :value="scope.row.year"/>
          </template>
        </el-table-column>
        <el-table-column label="班级" align="center" prop="className" />
        <el-table-column label="学生姓名" align="center" prop="stuName" />
        <el-table-column label="性别" align="center" prop="sex">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
          </template>
        </el-table-column>
        <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="220"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="detailFn(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />

        <el-dialog  :close-on-click-modal="false" :title="title" :visible.sync="open" width="600px" append-to-body>
                <div ref="myChartdom2" class="chartdom2"></div>
        </el-dialog>
    </div>
</template>

  <script>
  import { selectClazz } from "@/api/base/clazz";
  import { getSportList,sportExport } from "@/api/student/studentExercise";
  import moment from "moment";
  import { formatDateOnly} from "@/utils";
  export default {
    name: "qyyeysmx",
    dicts: ['year_type','sys_user_sex','sport_level'],
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
        },
        schoolList: [],  // 园所列表
        sportList: [
            {
                year:"1",
                stuName:"白小白",
                className:'二班',
                sex:"0",
            },
            {
                year:"2",
                stuName:"周爱国",
                className:'二班',
                sex:"0",
            },
            {
                year:"1",
                stuName:"王二牛",
                className:'二班',
                sex:"1",
            },
            {
                year:"1",
                stuName:"李冬梅",
                className:'二班',
                sex:"1",
            }
        ],
        // 班级表格数据
        classOptions: [],
        // 遮罩层
        loading: false,
        // 选中数组
        total: 0,
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: '',
          schoolCode:this.$store.getters.schoolCode,
          classId: '',
          dateTtime: formatDateOnly(new Date()),
        },
        watertDetail: [],
        ystotal: 0,
        ysParams: {
          id: '',
          pageNum: 1,
          pageSize: 10,
        },
        classList:[],
        isClassDisabled:true,//班级disabled
        previousDate:'',//前一天的标准时间
        title:'',
        myCharts2:null,
        legendSelected:{
             '日':true,
             '周':false,
             '月':false,
        },
        legendData:['日','周','月',],
        analysisData:[]
      };
    },
    created() {
      // 获取当前日期
    //   const currentDate = new Date();
    //   // 获取前一天的日期
    //   this.previousDate = new Date(currentDate);
    //   this.previousDate.setDate(currentDate.getDate() - 1);
    //   this.queryParams.dateTtime = formatDateOnly(this.previousDate)
    //   this.getList();
    },
    mounted() {
       
    
    },
    methods: {
        chartsFun(){
        console.log("9999")
        const option = {
         // backgroud:'#333',
        title: {
        text: '兴趣统计',
        //  subtext: '纯属虚构',
        left: 'left'
        },
        dataZoom:{
        bottom:0,
        show:12/this.analysisData.length<1,
        // show:true,
        type:'slider',
        zoomLock:true,
        brushSelect:false,
        height:8,
        // backgroundColor:'#000000',
        handleSize:'0',
        // moveHandleSize:1,
        // moveHandleStyle:{
        //   borderType:'dotted'
        // },
        sow:true,
        xAxisIndex:[0],
        start:0,
        end:12/this.analysisData.length*100
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
            type: 'shadow'
            }
        },
        legend: {
        selectedMode: 'single',
        top:0,
            left:'20%',
            data:this.legendData,
            selected:this.legendSelected
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
            type: 'category',
            axisLabel: {//x轴文字的配置
            show: true,
            rotate:30,
            interval: 0,//使x轴文字显示全
            },
            data: ['益智区','植物角','小厨房']
            }
        ],
        yAxis: [
            {
            type: 'value'
            }
        ],
        color:['#2f89cf','#27d08a'],
        series: [
            {
                name: '日',
                type: 'bar',
                // stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                barWidth:'60',
                label: {
                show: true,
                position: 'inside',
                fontSize: 15
                },
                data: [
                    {
                       name:'益智区',
                       value: 1.5,
                    },
                    {
                       name:'植物角',
                       value: 1,
                    },
                    {
                       name:'小厨房',
                       value: 2,
                    }
                ]
            },
            {
                name: '周',
                type: 'bar',
                // stack: 'Ad',
                barWidth:'60',
                emphasis: {
                    focus: 'series'
                },
                label: {
                show: true,
                position: 'inside',
                fontSize: 15
                },
                data: [
                {
                       name:'益智区',
                       value: 2,
                    },
                    {
                       name:'植物角',
                       value: 1,
                    },
                    {
                       name:'小厨房',
                       value: 2,
                    }
                ],
            },
            {
                name: '月',
                type: 'bar',
                // stack: 'Ad',
                emphasis: {
                    focus: 'series'
                },
                barWidth:'60',
                label: {
                show: true,
                position: 'inside',
                fontSize: 15
                },
                data:[
                    {
                       name:'益智区',
                       value: 1,
                    },
                    {
                       name:'植物角',
                       value: 1,
                    },
                    {
                       name:'小厨房',
                       value: 2,
                    }
                ],
            },
        ]
        }
        // 使用刚指定的配置项和数据显示图表
        this.myCharts2.setOption(option);
        console.log(this.myCharts2,"this.myCharts2")
        // window.addEventListener("resize", this.monitorResize);
        },
      // 导出
      handleExport() {
        this.handleQuery();
        const obj = {
            date: this.queryParams.dateTtime,
            classId: this.queryParams.classId,
            name: this.queryParams.name,
            pageNum: this.queryParams.pageNum,
            pageSize: this.queryParams.pageSize,
            schoolCode: this.$store.getters.schoolCode,
          }
        sportExport(obj).then(response => {
          this.download(response.msg);
        })
      },
      //获取列表
      async getList() {
        this.loading = true;
        try {
          const obj = {
            date: this.queryParams.dateTtime,
            classId: this.queryParams.classId,
            name: this.queryParams.name,
            pageNum: this.queryParams.pageNum,
            pageSize: this.queryParams.pageSize,
            schoolCode: this.$store.getters.schoolCode,
          }
          const data = await getSportList(obj)
          this.sportList = data.rows;
          this.total = data.total;
          this.loading = false;
        } catch (error) {
          console.log(error);
        }
      },
      /**班级*/
      async getqueryFormclassList(){
        this.isClassDisabled = true
        this.queryParams.classId = null
        try {
          let params={}
          if(this.queryParams.year) params.year = this.queryParams.year;
          const {rows}=await selectClazz(params);
          if(rows.length && this.queryParams.year){
            this.isClassDisabled =  false
          }
          this.classList=rows.map(item=>{
            return {
              id:item.id,
              label:item.title,
            }
          })

        }catch (e) {
          console.log(e)
        }
      },
      // 序号
      customeIndex(index) {
        return index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
      },
      // 序号
      customeIndex1(index) {
        return index + 1 + (this.ysParams.pageNum - 1) * this.ysParams.pageSize
      },
      async getClazzList() {
        try {
          const obj = {
            // schoolCode: this.queryParams.schoolCode,
          }
          const data = await clazzList(obj)
          this.classOptions = data.rows;
          console.log(data);
        } catch (error) {
          console.log(error);
        }
      },
      getClear() {
        this.queryParams.classId = ''
      },
      selectSchool() {
        this.getClazzList()
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          name: '',
          classId: '',
          dateTtime: formatDateOnly(this.previousDate)
        },
        this.resetForm("queryForm");
        this.handleQuery();
        this.isClassDisabled = true
      },
      detailFn(){
        this.open = true 
       
        this.$nextTick(()=>{
            this.myCharts2 = this.$echarts.init(this.$refs.myChartdom2,);
            this.chartsFun()  
        })
        
      }
    }
  };
  </script>
  <style lang="scss"> 
  .chartdom2{
      width: 500px;
      height: 500px;
  }
</style>
